<template>
	<view class="container">

		<scroll-view id="scrollview" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" show-scrollbar="true">

			<view class="chat">
				<block class="comment" v-for=" c in messages">

					<view class="left" v-if="c.fromUid == toid">
						<image :src="youAvatar" mode="aspectFill"></image>
						<view class="content">
							<text>{{c.content}}</text>
						</view>
					</view>

					<view class="right" v-else>
						<image :src="myAvatar" mode="aspectFill"></image>
						<view class="content">
							<text>{{c.content}}</text>
						</view>
					</view>
				</block>
			</view>

		</scroll-view>

		<view class="beneath">
			<view class="message">
				<textarea v-model="text"></textarea>
				<!-- <image src="@/static/picture.png" @click="chooseImage"></image> -->
				<view class="send" @click="send">
					<text>发送</text>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				chatList: {},
				text: '',
				image: '',
				toid: 2,
				scrollTop: 0,
				myAvatar: '',
				youAvatar: '',
				old: {
					scrollTop: 0
				},
				messages: [],
				information: {},
				oldbottom: "",
				rpxTopx: null,
				consultationId: 0,
				oldbottom: ""
			}
		},
		computed: {
			//监听接收到的消息
			getAccept() {
				return this.$websocket.getters.getAccept
			}
		},
		watch: {
			'getAccept': {
				//处理接收到的消息
				handler: function() {
					let that = this
					console.log("接收到msg")
					this.new = this.getAccept;

					if (this.getAccept.fromUid = this.toid) {
						this.messages.push(this.getAccept);
						console.log("推送一条")
						console.log(this.messages)
					}
				}
			}
		},
		created() {

			let that = this;

			this.querySingle();
		},
		onLoad(option) {
			console.log("onload" + option);
			let that = this;
			this.toid = option.id;
			this.querySingle();
			this.toid = option.id;
			this.consultationId = option.toid;
			console.log(this.toid + "   收到")
			var items = this.$websocket.state.users;
			console.log("开始循环")
			console.log(items)
			items.forEach((a) => {
				if (a.id == that.toid) {
					that.youAvatar = a.avatar
					console.log(that.youAvatar + "获取你的")
				}
				if (a.id == that.$websocket.state.uid) {
					that.myAvatar = a.avatar
					console.log(that.myAvatar + "获取我的")
				}
			});
		},
		onshow(option) {
			console.log("onshow" + option);
			let that = this;
			this.toid = option.id;
			this.querySingle();
			this.toid = option.id;
			this.consultationId = option.toid;
			console.log(this.toid + "   收到")
			var items = this.$websocket.state.users;
			console.log("开始循环")
			console.log(items)
			items.forEach((a) => {
				if (a.id == that.toid) {
					that.youAvatar = a.avatar
					console.log(that.youAvatar + "获取你的")
				}
				if (a.id == that.$websocket.state.uid) {
					that.myAvatar = a.avatar
					console.log(that.myAvatar + "获取我的")
				}
			});
		},
		methods: {

			// 滚动至聊天底部
			scrollToBottom() {
				// 外层加一个延时函数是为了能获取到节点的准确信息
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
					// 获取节点信息
					query.select('#scrollview').boundingClientRect();
					query.select('.comment').boundingClientRect();
					query.exec((res) => {
						console.log(res)
						if (res[1].height > res[0].height) {
							console.log(res[1].height)
							console.log(res[0].height)
							// this.scrollTop = this.rpxTopx(res[1].height - res[0].height)
							this.scrollTop = res[1].height - res[0].height
						}
					})
				}, 15)
			},

			Add() {
				uni.request({
					url: 'http://127.0.0.1:800/mhs/room/Add?id=' + this.consultationId, //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.messages = res.data.data;
						console.log(this.messages);
					},
				});
			},

			send() {
				let message = new Object();
				let userId = uni.getStorageSync("loginUser").id;
				message.fromUid = userId + '';
				message.toUid = this.toid + '';
				message.content = this.text;
				var ta = JSON.stringify(message);
				this.$websocket.commit("webSocketSend", ta)
				console.log('message' + message)
				console.log('messages' + this.messages)
				if(!this.messages){
					this.messages = [];
				}
				this.messages.push(message);
				this.text = '';
			},


			querySingle() {

				uni.request({
					url: 'http://127.0.0.1:800/mhs/message/querySingle?uid=' + this.$websocket.state.uid +
						'&toUid=' + this.toid, //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.messages = res.data.data;
						console.log(this.messages);
					},
				});
			}
		}
	}
</script>

<style>
	.container {
		background-color: #F5F5F5;

	}

	.scroll-Y {
		width: 750rpx;
		height: 90vh;
	}

	.comment {
		display: flex;
		flex-direction: column;
		-webkit-overflow-scrolling: touch;
		overflow-y: scroll;
	}

	.left {
		margin-top: 3vh;
		display: flex;
	}

	.content {
		margin-left: 2vw;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
		border: 1px;
		padding: 1vh;
		border-radius: 5%;
		/* 		width: 50%; */
		max-width: 50%;
		background-color: #95EC69;
	}

	.content text {
		font-size: 15px;
	}

	.left image {
		width: 35px;
		height: 35px;
		border-radius: 50%;
	}

	.right {
		margin-top: 3vh;
		display: flex;
		flex-direction: row-reverse;
	}

	.right image {
		width: 35px;
		height: 35px;
		border-radius: 50%;
	}



	.beneath {
		border-top: 1px solid;
		width: 100vw;
		height: 10vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 		flex: auto;
		position: absolute;
		bottom: 0px; */
		position: absolute;
		bottom: 0;
		background-color: #F5F5F5;
	}

	.message {
		display: flex;
		justify-content: space-around;
	}

	.message textarea {
		height: 33px;
		width: 50%;
		border: 0px;
		outline: none;
		background-color: #ffffff;
	}

	.message image {
		width: 38px;
		height: 38px;
	}

	.send {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid;
		border-radius: 7%;
		height: 33px;
		width: 80px;
		background-color: green;
	}

	.send text {

		color: #ffffff;
	}
</style>